import React, { useMemo } from 'react'
import styles from "../assets/styles/pageing.module.css"

export default function Pageing({ currentPage, pageSize, total,fenye }) {
    //pageSize：4 total:29
    const totalPage = useMemo(() => {
        return Math.ceil(total / pageSize)
    }, [total, pageSize])

    const LiArray = ()=>{
        let temp = []
        for (let index = 0; index < totalPage; index++) {
            temp.push(<li index={index+1} key={index}>{index+1}</li>)
        }
        return temp
    }

    const checkedPageEvent = (event)=>{
        const element = event.target
        if(element.nodeName == "LI"){
            const index = element.getAttribute("index")
            fenye(Number(index))
        }
    }

    return (
        <div className={styles.fenye}>
            <div>当前{currentPage}页/共{totalPage}页</div>
            <div className={styles.page}>
                <ul onClick={checkedPageEvent}>
                    {LiArray()}
                </ul>
            </div>
        </div>
    )
}
